<template>
	<view class="container">
		<view class="conter">
			<view class="c-box" @click="show=true">
				<view class="c-b-1">转运箱类型</view>
				<view  class="type">{{model.productName?model.productName:'请选择转运箱类型'}}</view>
			</view>
			<view class="c-box" @click="handleISBatch">
				<view class="c-b-1">转运箱批次</view>
				<view  class="type">{{model.batchNumber?model.batchNumber:'请选择转运箱批次'}}</view>
			</view>
			<view class="c-box">
				<view class="c-b-1">转运箱价值</view>
				<input type="number" placeholder="请输入转运箱价值" v-model="model.boxMoney"
					placeholder-style="font-size: 26rpx;">
			</view>
			<view class="c-box">
				<view class="c-b-1">转运箱长度</view>
				<input type="number" maxlength="3" placeholder="请输入转运箱长度" v-model="model.boxHeight"
					placeholder-style="font-size: 26rpx;">
			</view>
			<view class="c-box">
				<view class="c-b-1">转运箱宽度</view>
				<input type="number" maxlength="3" placeholder="请输入转运箱长宽" v-model="model.boxWidth"
					placeholder-style="font-size: 26rpx;">
			</view>
			<view class="c-box">
				<view class="c-b-1">转运箱高度</view>
				<input type="number" maxlength="3" placeholder="请输入转运箱长高" v-model="model.boxDepth"
					placeholder-style="font-size: 26rpx;">
			</view>
		</view>

		<view class="buts">
			<u-button :loading='loading' :custom-style="customStyleBtn1" @click="submit">确认</u-button>
		</view>
		<view class="po-bot" v-if="isDot">
			<view class="dot"></view>
			<view class="ima">
				<image style="width: 60rpx;height: 60rpx;" src="/static/work/04.png" mode=""></image>
			</view>
		</view>
		<u-picker :show="show"  :columns="columns" keyName="label" @confirm="handleConfirm"
			@cancel="show=false"></u-picker>
		<u-picker :show="isbatch"  :columns="batchs" keyName="label" @confirm="handlebatchs"
			@cancel="isbatch=false"></u-picker>
		<u-popup :show="isSecondary"  mode="center" @close="isSecondary = false" bgColor="transparent">
			<view class="Secondary-2">
			    <image class="Secondary-1" src="/static/work/20250402150507.png" mode=""></image>
				<view class="Secondary-3">
					<view>转运箱编号：{{id}}</view>
					<view class="Secondary-5" @click="continueWriting">
						继续写入
					</view>
					<view class="Secondary-4" @click="returnToHomepage">返回首页</view>
				</view>
			</view>	
		</u-popup>
	</view>
</template>

<script>
	import NFC from './NFC.js'
	import {
		createBox,
		productSimpleList,
		getSpuBatchNumbers
	} from '@/api/store.js'
	export default {
		data() {
			return {
				isSecondary:false,
				isbatch:false,
				isDot: false,
				loading: false,
				customStyleBtn1: {
					width: '700rpx',
					height: '90rpx',
					borderRadius: '20rpx',
					background: "linear-gradient(0deg, #177A77, #4B9C6D)",
					fontSize: '28rpx',
					fontWeight: 400,
					color: '#ffffff',
					border: 'none'
				},
				batchs:[],//批次列表
				model: {
					boxMoney: '', //转运箱价值
					boxWidth: '', //转运箱宽度
					boxDepth: '', //转运箱高度
					boxHeight: '', //转运箱长度
					productSkuId: '', //转运箱类型
					productName: '', //转运箱名称
					batchNumber:'',//批次
				},
				show: false,
				columns: [],
				id: '', //需要写入的数据
			}
		},
		onLoad() {
			this.getTypes()
			NFC.listenNFCStatus()
			this.handleCustomEventBind = this.handleCustomEvent.bind(this);
			uni.$on('writeData', this.handleCustomEventBind);

			// nfcCodds
			this.handleCustomEventBindRead = this.handleCustomEventRead.bind(this);
			uni.$on('nfcCodds', this.handleCustomEventBindRead);
		},
		methods: {
			// 提交数据获取返回的id写入到NFC
			async submit() {
				if (this.model.productSkuId == '') {
					uni.showToast({
						title: '请选择转运箱类型',
						icon: 'none'
					})
					return
				}
				
				if (this.model.batchNumber == '') {
					uni.showToast({
						title: '请选择转运箱批次',
						icon: 'none'
					})
					return
				}

				if (this.model.boxMoney == '') {
					uni.showToast({
						title: '请输入转运箱价值',
						icon: 'none'
					})
					return
				}

				if (this.model.boxHeight == '') {
					uni.showToast({
						title: '请输入转运箱长度',
						icon: 'none'
					})
					return
				}

				if (this.model.boxWidth == '') {
					uni.showToast({
						title: '请输入转运箱宽度',
						icon: 'none'
					})
					return
				}

				if (this.model.boxDepth == '') {
					uni.showToast({
						title: '请输入转运箱高度',
						icon: 'none'
					})
					return
				}

				this.loading = true
				let data = {
					boxMoney: parseFloat(this.model.boxMoney), //转运箱价值
					boxWidth: this.model.boxWidth, //转运箱宽度
					boxDepth: this.model.boxDepth, //转运箱高度
					boxHeight: this.model.boxHeight, //转运箱长度
					productSkuId: this.model.productSkuId, //转运箱类型
					batchNumber:this.model.batchNumber
				}
				let res = await createBox(data)
				this.isDot = true
				this.id = res.data
				NFC.readData();

			},
			// NFC读数据，先读判断芯片是否使用过
			handleCustomEventRead(event) {
				console.log('查看芯片信息：',event.data.length);
				if (event.data.length) {
					uni.showToast({
						title: '请勿重复写入',
						icon: 'none'
					})
					setTimeout(() => {
						NFC.readData();
					}, 500)
					return
				}
				NFC.writeData(''+this.id)
			},
			// 写入数据结果
			handleCustomEvent() {
				this.isSecondary = true
				this.loading = false
				this.isDot = false
				
			},
			// 继续写入
			continueWriting(){
				this.model.boxDepth = ''
				this.model.boxHeight = ''
				this.model.boxMoney = ''
				this.model.boxWidth = ''
				this.model.productName = ''
				this.model.productSkuId = ''
				this.model.batchNumber = ''
				this.isSecondary = false
			},
			// 返回主页
			returnToHomepage(){
				this.isSecondary = false
				uni.navigateBack()
			},
			// 下拉点击确定
			handleConfirm(val) {
				// 根据类型获取批次列表
				this.getNumbers(val.value[0].id)
				this.model.productSkuId = val.value[0].id
				this.model.productName = val.value[0].label
				this.show = false
			},
			handlebatchs(val){
				this.model.batchNumber =  val.value[0].id
				this.isbatch = false
			},
			// 获取类型
			async getTypes() {
				let res = await productSimpleList()
				let list = res.data.map(item => {
					return {
						label: item.spuName,
						id: item.id
					}
				})
				this.columns.push(list)
			},
			// 获取	批次列表
			async getNumbers(id){
				let res = await getSpuBatchNumbers(id)
				if(res.data.length==0){
					uni.showToast({
						title:'暂无批次',
						icon:'none'
					})
					return
				}
				let list = res.data.map(item => {
					return {
						label: item,
						id: item
					}
				})
				this.batchs=[]
				this.batchs.push(list)
			},
			// 选择批次弹窗
			handleISBatch(){
				if(this.batchs.length>0){
					this.isbatch = true
				}else{
					uni.showToast({
						title:'暂无批次',
						icon:'none'
					})
				}
			}
		},
		onUnload() {
			uni.$off('writeData')
			uni.$off('nfcCodds')
		}
	}
</script>

<style scoped>
	.Secondary-5{
		width: 410rpx;
		height: 68rpx;
		background: #177A77;
		border-radius: 34rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		color: #FFFFFF;
	}
	.Secondary-4{
		font-size: 30rpx;
		color: #177A77;
		border-bottom: 1rpx solid #177A77;
	}
	.Secondary-3{
		width: 508rpx;
		height: 220rpx;
		position: absolute;
		bottom: 50rpx;
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
	}
	.Secondary-2{
		width: 508rpx;
		height: 582rpx;
		position: relative;
		top: 0;
		left: 0;
	}
	.Secondary-1{
		width: 508rpx;
		height: 582rpx;
		position: absolute;
		top: 0;
		left: 0;
	}
	.ima {
		width: 100rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 2;
		position: absolute;
		top: 32%;
	}

	.po-bot {
		width: 100%;
		height: 700rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
	}

	.dot {
		width: 70px;
		height: 70px;
		display: block;
		position: absolute;
		border-radius: 50%;
		background-color: #FFFFFF;
		margin-top: -150rpx;
		margin-right: 0rpx;
		z-index: 1;
	}

	.dot::after {
		width: 100%;
		height: 100%;
		content: "";
		border-radius: 50%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -2;
		background-color: #177A77;
		animation: dot-play 4s linear 400ms infinite;
	}

	.dot::before {
		width: 100%;
		height: 100%;
		content: "";
		border-radius: 50%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		background-color: #DDECEB;
		animation: dot-play 4s linear 200ms infinite;
		animation-delay: 2s;
		/* 延迟 2s */
	}

	@keyframes dot-play {
		from {
			transform: scale(1);
			opacity: .2;
		}

		to {
			transform: scale(4);
			opacity: 0;
		}
	}

	.buts {
		width: 100%;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.type {
		color: #818181;
	}

	.c-b-1 {
		width: 180rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
	}

	.c-box {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
	}

	.conter {
		width: 690rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 26rpx;
		background-color: #FFFFFF;
		padding: 0 25rpx;
		box-sizing: border-box;
		margin-top: 25rpx;
		border-radius: 15rpx;
	}

	.container {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #F8F8F8;
	}
</style>